{% extends 'base.html' %}
{% block title %}Deployments{% endblock %}
{% block nav-item-2 %}layui-nav-itemed{% endblock %}
{% block nav-this-2-1 %}layui-this{% endblock %}
{% block content %}
    <span class="layui-breadcrumb">
      <a href="#">首页</a>
      <a href="#">工作负载</a>
      <a href="#">Deployments</a>
      <a><cite>详情页</cite></a>
    </span>
    <hr>
    <hr>
    <style>
        .layui-card-header {
            font-size: 16px;
        }
        .layui-card-body {
            font-size: 16px;
            padding: 10px;
        }
        .layui-card-body .layui-inline {
            padding: 10px;
            font-size: 14px;
            width: 98%;
            color: #646464;
            border: 1px solid #ebeef5;
            border-radius: 4px;
        }
        #result {
            background-color: #fff;
            border: 1px solid #ebeef5;
            border-radius: 4px;
            box-shadow: 0 1px 1px 0 #c2c2c2;
            padding: 10px;
            font-size: 14px;
        }
        /* span徽章 */
        .layui-badge {
            font-size: 14px;
        }
        .svc-ing {
            margin: 10px;
            line-height: 32px;
        }
        .svc-ing table {
            width: 100%;
            text-align: center
        }
        .svc-ing table th {
            background-color: #d5dce7;
            color: #2e5085;
        }
        .svc-ing table td,tr {
            border:1px solid #ebeef5;
            font-size: 15px;
        }
        .self-none {
            background-color: #f4f4f5;
            color: #909399;
            padding: 5px;
            font-size: 14px;
        }
    </style>
    <div class="layui-col-md12 layui-col-space10">

        <div class="layui-col-md6 layui-col-space10">

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">基本信息</div>
                    <div class="layui-card-body">
                         名称：{{ dp_info.name }}
                        <hr class="layui-bg-gray">
                        命名空间：{{ dp_info.namespace }}
                         <hr class="layui-bg-gray">
                         副本数量：<span class="layui-badge layui-bg-green" >期望 {{ dp_info.replicas }}</span> <span class="layui-badge layui-bg-gray">
                                    /
                                    </span> <span class="layui-badge layui-bg-orange" >可用 {{ dp_info.available_replicas }}</span>
                         <hr class="layui-bg-gray">
                         镜像：
                         {% for c in dp_info.containers %}
                            {% if dp_info.containers|length == 1 %}
                            <span>{{ c.image }}</span>
                            {% else %}
                            <span style='border: 1px solid #d6e5ec;padding: 3px'>{{ c.image }}</span>
                            {% endif %}
                         {% endfor %}
                         <hr class="layui-bg-gray">
                         标签选择器：
                         {% for k,v in dp_info.selector.items %}
                            <span style='border: 1px solid #d6e5ec;border-radius: 20px;padding: 1px 6px 1px 6px'>{{ k }}={{ v }}</span>
                         {% endfor %}
                         <hr class="layui-bg-gray">
                         创建时间：{{ dp_info.create_time }}
                         <hr class="layui-bg-gray">
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">Service</div>
                    <div class="layui-card-body">
                       <div class="svc-ing">
                            {% if dp_info.service %}
                            {% for svc in dp_info.service %}
                            <p>
                            类型：{{ svc.type }}<br>
                            ClusterIP：{{ svc.cluster_ip }}&ensp;&ensp;<span class="layui-badge layui-bg-green" style="font-size: 12px">集群内部访问地址</span><br>
                            访问端口：<br>
                            </p>
                            <table>
                                <thead style="">
                                    <tr>
                                        <th>名称</th>
                                        <th>服务端口</th>
                                        <th>容器端口</th>
                                        <th>协议</th>
                                        {% if svc.type == "NodePort" %}
                                        <th>NodePort</th>
                                        {% endif %}
                                    </tr>
                                </thead>

                                <tbody>
                                    {% for k in svc.ports %}
                                    <tr>
                                        <td>{{ k.name }}</td>
                                        <td>{{ k.port }}</td>
                                        <td>{{ k.target_port }}</td>
                                        <td>{{ k.protocol }}</td>
                                        {% if svc.type == "NodePort" %}
                                        <td>{{ k.node_port }}</td>
                                        {% endif %}
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        {% endfor %}
                        {% else %}
                             <span class="self-none">此处显示通过 Deployment 标签筛选出的Service，但是您并未定义！</span>
                                <br><br>
                        {% endif %}
                      </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">Ingress</div>
                    <div class="layui-card-body">
                        <div class="svc-ing">
                            {% if dp_info.ingress.rules %}
                            {% for ing in dp_info.ingress.rules %}
                            <p>
                            {% if dp_info.ingress.tls == None %}
                            域名：<a href="http://{{ ing.host }}" target="_blank" style="color: #007af5">http://{{ ing.host }}</a>
                            {% else %}
                            域名：<a href="https://{{ ing.host }}" target="_blank" style="color: #007af5">https://{{ ing.host }}</a>
                            {% endif %}
                            </p>
                            <table>
                                <thead style="">
                                    <tr>
                                        <th>路由规则</th>
                                        <th>服务名称</th>
                                        <th>服务端口</th>
                                        <th>HTTPS</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    <tr>
                                        {% if ing.http.path == None %}
                                        <td>/</td>
                                        {% else %}
                                        <td>{{ ing.http.path }}</td>
                                        {% endif %}

                                        {% for h in ing.http.paths %}
                                            <td>{{ h.backend.service_name }}</td>
                                            <td>{{ h.backend.service_port }}</td>
                                        {% endfor %}

                                        {% if dp_info.ingress.tls != None %}
                                            {% for t in dp_info.ingress.tls %}
                                            <td>
                                                {% for i in t.hosts %}
                                                域名：{{ i }}<br>
                                                {% endfor %}
                                                证书：{{ t.secret_name }}
                                            </td>
                                            {% endfor %}
                                        {% else %}
                                            <td>未启用</td>
                                        {% endif %}
                                    </tr>
                                </tbody>
                            </table>
                        {% endfor %}
                        {% else %}
                             <span class="self-none">此处显示是通过 Ingress 后端与上面 Service 匹配的 Ingress，但是您并未定义！</span>
                                <br><br>
                        {% endif %}
                      </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">更多信息</div>
                <div class="layui-card-body">
                    滚动更新：
                    <div class="layui-inline" style="width: 30%">
                          最大超出副本数：{{ dp_info.rolling_update.max_surge }}<br>
                          最大不可用副本数：{{ dp_info.rolling_update.max_unavailable }}
                    </div>

                    <hr class="layui-bg-gray">
                    数据卷：
                    {% if  dp_info.volumes|length > 0 %}
                    <div class="layui-inline" id="inline">
                          <div class="layui-row layui-col-space15">
                              {% for vol in dp_info.volumes %}
                                <div class="layui-col-md4">
                                  <div class="grid-demo grid-demo-bg1">

                                    {% for k,v in vol.items %}

                                    <div id="result">
                                          卷名称：{{ v.name }}<br>
                                          卷类型：{{ k }}<br>
                                    </div>
                                    {% endfor %}
                                </div>
                              </div>
                              {% endfor %}

                          </div>
                    </div>
                    {% else %}
                      <span class="self-none">None</span>
                    {% endif %}

                    <hr class="layui-bg-gray">
                    污点容忍：
                    {% if  dp_info.tolerations|length > 0 %}
                    <div class="layui-inline">
                        <div class="layui-row layui-col-space15">
                              {% for t in dp_info.tolerations %}
                              <div class="layui-col-md4">
                                <div class="grid-demo grid-demo-bg1">
                                    <div class="layui-card">
                                        <div class="layui-card-body" style="font-size: 14px">
                                          key：{{ t.key }}<br>
                                          operator：{{ t.operator }}<br>
                                          effect：{{ t.effect }}<br>
                                          容忍时间：{{ t.toleration_seconds }}<br>
                                        </div>
                                    </div>

                                </div>
                              </div>
                              {% endfor %}
                        </div>
                    </div>
                    {% else %}
                      <span class="self-none">None</span>
                    {% endif %}

                    <hr class="layui-bg-gray">
                    容器配置：
                    <div class="layui-inline">
                    <div class="layui-row layui-col-space15"  style="height: 480px;overflow: auto">
                        {% for c in dp_info.containers %}
                        <div class="layui-col-md5">
                            <div class="grid-demo grid-demo-bg1">
                                <div class="layui-card">
                                    <div class="layui-card-body">

                                        <span style="color: #fff;border-radius: 4px;background-color: #2e5085;padding: 2px;">容器{{ forloop.counter }}：{{ c.name }}</span><br><br>

                                        {% if c.env != None %}
                                            <div id="result">
                                            <span class="layui-badge layui-bg-green" >变量</span>
                                            <hr>
                                            {% for v in c.env %}

                                                {% if v.value != None %}
                                                    来源：自定义<br>
                                                    名称：{{ v.name }}<br>
                                                    值：{{ v.value }}
                                                {% elif v.value_from != None %}
                                                    {% if v.value_from.config_map_key_ref != None  %}
                                                        来源：configmap / {{ v.value_from.config_map_key_ref.name }} / {{ v.value_from.config_map_key_ref.key }}<br>
                                                        名称：{{ v.name }}
                                                    {% elif v.value_from.secret_key_ref != None  %}
                                                        来源：secret / {{ v.value_from.secret_key_ref.name }} / {{ v.value_from.secret_key_ref.key }}<br>
                                                        名称：{{ v.name }}
                                                    {% elif v.value_from.field_ref != None  %}
                                                        来源：Pod属性 / {{ v.value_from.field_ref.field_path }}<br>
                                                        名称：{{ v.name }}
                                                    {% endif %}
                                                {% endif %}
                                                {% if forloop.counter != c.env|length %}
                                                    <hr>
                                                {% endif %}
                                            {% endfor %}

                                            </div>
                                        {% else %}
                                            <div id="result">
                                                <span class="layui-badge layui-bg-green" >变量</span>
                                                <hr>
                                                <span class="self-none">None</span>
                                            </div>
                                        {% endif %}
                                        <br>

                                        {% if c.ports != None %}
                                            <div id="result">
                                            <span class="layui-badge layui-bg-green" >端口</span>
                                            <hr>
                                            {% for p in c.ports %}
                                                名称：{{ p.name }}<br>
                                                容器端口：{{ p.container_port }}<br>
                                                协议：{{ p.protocol }}
                                            {% endfor %}
                                            </div>
                                        {% else %}
                                            <div id="result">
                                            <span class="layui-badge layui-bg-green" >端口</span>
                                            <hr>
                                            <span class="self-none">None</span>
                                            </div>
                                        {% endif %}

                                        <br>

                                        {% if c.resources.requests == None and c.resources.limits == None %}
                                            <div id="result">
                                                <span class="layui-badge layui-bg-green" >资源分配</span>
                                                <hr>
                                                <span class="self-none">None</span>
                                            </div>
                                        {% else %}
                                            <div id="result">
                                            <span class="layui-badge layui-bg-green" >资源分配</span>
                                            <hr>
                                            {% if c.resources.requests != None %}
                                                <span class="layui-badge layui-bg-orange">请求</span><br>
                                                {% if c.resources.requests.cpu != None %}
                                                    CPU：{{ c.resources.requests.cpu }}<br>
                                                {% else %}
                                                    CPU: <span class="layui-badge layui-bg-gray">None</span>
                                                {% endif %}
                                                {% if c.resources.requests.memory != None %}
                                                    内存：{{ c.resources.requests.memory }}<br>
                                                {% else %}
                                                    内存: <span class="layui-badge layui-bg-gray">None</span>
                                                {% endif %}
                                            {% else %}
                                                <span class="layui-badge layui-bg-orange">请求</span>&ensp;
                                                <span class="self-none">None</span>
                                            {% endif %}

                                            <hr>

                                            {% if c.resources.limits != None %}
                                                <span class="layui-badge layui-bg-orange">限制</span><br>
                                                {% if c.resources.limits.cpu != None %}
                                                    CPU：{{ c.resources.limits.cpu }}<br>
                                                {% else %}
                                                    CPU: <span class="layui-badge layui-bg-gray">None</span>
                                                {% endif %}
                                                {% if c.resources.limits.memory != None %}
                                                    内存：{{ c.resources.limits.memory }}<br>
                                                {% else %}
                                                    内存: <span class="layui-badge layui-bg-gray">None</span>
                                                {% endif %}
                                            {% else %}
                                                <span class="layui-badge layui-bg-orange">限制</span>&ensp;
                                                <span class="self-none">None</span>
                                            {% endif %}
                                            </div>
                                        {% endif %}

                                        <br>

                                        {% if c.readiness_probe == None and c.liveness_probe == None %}
                                           <div id="result">
                                                <span class="layui-badge layui-bg-green">健康检查</span>
                                                <hr>
                                                <span class="self-none">None</span>
                                            </div>
                                        {% else %}
                                           <div id="result">
                                           <span class="layui-badge layui-bg-green" >健康检查</span>
                                           <hr>
                                             {% if c.readiness_probe != None %}
                                                 <span class="layui-badge layui-bg-orange">就绪检查</span><br>
                                                {% if c.readiness_probe.tcp_socket != None %}
                                                    类型：tcp_socket<br>
                                                    端口：{{ c.readiness_probe.tcp_socket.port }}<br>
                                                    初始延迟检查时间(s)：{{ c.readiness_probe.initial_delay_seconds }}<br>
                                                    周期间隔(s)：{{ c.readiness_probe.period_seconds }}
                                                {% elif c.readiness_probe.http_get  != None %}
                                                    类型：http_get<br>
                                                    URL：{{ c.readiness_probe.http_get.path }}<br>
                                                    端口：{{ c.readiness_probe.http_get.port }}<br>
                                                    协议：{{ c.readiness_probe.http_get.scheme }}<br>
                                                    初始延迟检查时间(s)：{{ c.readiness_probe.initial_delay_seconds }}<br>
                                                    周期间隔(s)：{{ c.readiness_probe.period_seconds }}
            {#                                    {% elif c.readiness_probe._exec  != None %}#}
            {#                                        {{ c.readiness_probe._exec }}#}
                                                {% endif %}
                                             {% else %}
                                                 <span class="layui-badge layui-bg-orange">就绪检查</span>&ensp;
                                                 <span class="self-none">None</span>
                                             {% endif %}

                                             <hr>

                                             {% if c.liveness_probe != None %}
                                                 <span class="layui-badge layui-bg-orange">存活检查</span><br>
                                                {% if c.liveness_probe.tcp_socket != None %}
                                                    类型：tcp_socket<br>
                                                    端口：{{ c.liveness_probe.tcp_socket.port }}<br>
                                                    初始延迟检查时间(s)：{{ c.readiness_probe.initial_delay_seconds }}<br>
                                                    周期间隔(s)：{{ c.readiness_probe.period_seconds }}
                                                {% elif c.liveness_probe.http_get  != None %}
                                                    类型：http_get<br>
                                                    URL：{{ c.liveness_probe.http_get.path }}<br>
                                                    端口：{{ c.liveness_probe.http_get.port }}<br>
                                                    协议：{{ c.liveness_probe.http_get.scheme }}<br>
                                                    初始延迟检查时间(s)：{{ c.liveness_probe.initial_delay_seconds }}<br>
                                                    周期间隔(s)：{{ c.liveness_probe.period_seconds }}
            {#                                    {% elif c.readiness_probe._exec  != None %}#}
            {#                                        {{ c.readiness_probe._exec }}#}
                                                {% endif %}
                                             {% else %}
                                                 <span class="layui-badge layui-bg-orange">存活检查</span>&ensp;
                                                 <span class="self-none">None</span>
                                             {% endif %}
                                            </div>
                                        {% endif %}

                                        <br>

                                      {% if  c.volume_mounts != None %}
                                          <div id="result">
                                          <span class="layui-badge layui-bg-green" >数据卷</span>
                                          <hr>
                                          {% for vol in c.volume_mounts %}
                                              名称：{{ vol.name }}<br>
                                              挂载点：{{ vol.mount_path }}<br>
                                              子路径：{{ vol.sub_path }}<br>
                                              只读：{{ vol.read_only }}

            {#                                  {% for k,v in vol.items %}#}
            {#                                  数据卷：{{ k }}{{ v }}#}
            {#                                  {% endfor %}#}
                                          {% endfor %}
                                          </div>
                                     {% else %}
                                          <div id="result">
                                              <span class="layui-badge layui-bg-green" >数据卷</span>
                                              <hr>
                                              <span class="self-none">None</span>
                                          </div>
                                     {% endif %}

                                   </div>
                                </div>
                        </div>
                    </div>
                    {% endfor %}
                    </div>
                </div>
            </div>
        </div>



    </div>
    </div>
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-header">历史发布版本（ReplicaSet副本集）&ensp;&ensp;<span class="layui-badge layui-bg-green" style="font-size: 12px">  最大历史版本数量：{{ dp_info.rs_number }}</span></div>
        <div class="layui-card-body">
            <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="yaml">YAML</a>
  <a class="layui-btn layui-btn-xs" lay-event="rollback">回滚</a>
</script>

{% endblock %}

{% block js %}
<script>

// 获取当前命名空间
var storage = window.sessionStorage;
var namespace = storage.getItem("namespace");

layui.use('table', function(){
  var table = layui.table;
  var $ = layui.jquery;

      table.render({
        elem: '#test'
        ,url:'{% url "workload:replicaset_api" %}?namespace={{ namespace }}&name={{ dp_name }}'
        ,page: false  // 关闭分页
        ,cols: [[
          {field: 'name', title: '名称', sort: true}
          {#,{field: 'namespace', title: '命名空间', sort: true}#}
          ,{field: 'replicas', title: '期望', sort: true}
          ,{field: 'ready_replicas', title: '就绪'}
          ,{field: 'available_replicas', title: '可用',sort: true}
          ,{field: 'create_time', title: '创建时间'}
          ,{field: 'revision', title: '版本号',sort: true}
          ,{field: 'containers', title: '镜像版本差异', templet: containersFormat}
           ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
        ]]
    });

  function containersFormat(d) {
      result = "";
      for(let key in d.containers) {
          result += key + '=' + d.containers[key] + '<br>'
      }
      return result
  }
  //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    if (obj.event === 'rollback'){
        layer.confirm('真的要回滚到 ' + data["name"] + "/" + data["revision"] + ' 这个版本吗？', function(index){
            var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
            data['csrfmiddlewaretoken'] = csrf_token;
            data['dp_name'] = '{{ dp_name }}';
            $.ajax({
                url: '{% url "workload:replicaset_api" %}',
                type: "POST",
                data: data,
                success: function (res) {
                     if(res.code == '0'){
                           layer.msg(res.msg,{icon:6});
                       } else {
                           layer.msg(res.msg, {icon:5})
                       }
                }
            });
       })
    } else if(obj.event === 'yaml'){
          layer.open({
            title: "YAML",
            type: 2,  // 加载层，从另一个网址引用
            area : [ '50%', '60%' ],
            content: '{% url "ace_editor" %}?resource=replicaset&' + 'namespace=' + data["namespace"] + "&name=" + data["name"],
          });
    }
  });
});
</script>

{% endblock %}